<template>
  <!-- 行为安全之星列表 -->
  <base-breadcrumb>
    <searchData :searchData="searchOptions" @search="search" />
    <div class="page-body">
      <a-card :bordered="false">
        <title-name :title="$route.meta.title" />
        <!-- 行为安全之星列表统计 -->
        <div class="table-operateors mb20">
          <div class="pub-table-select-count" style="margin: 10px 0">
            <a-icon type="info-circle" theme="twoTone" />
            <span>发卡总数：<a>{{ statistical.total }}</a>个</span>
            <a-divider type="vertical"></a-divider>
            <span>  今日发卡数：<a>{{ statistical.todayNum }}</a>个</span>
            <a-divider type="vertical"></a-divider>
            <span>昨日发卡数：<a>{{ statistical.yesterdayNum }}</a>个</span>
            <a-divider type="vertical"></a-divider>
            <span>本周发卡数：<a>{{ statistical.thisWeekNum }}</a>个</span>
            <a-divider type="vertical"></a-divider>
            <span>本月发卡数：<a>{{ statistical.thisMonthNum }}</a>个</span>
          </div>
        </div>
        <s-table
          :scroll="{ x: 1800 }"
          ref="table"
          size="default"
          rowKey="employeeId"
          :columns="columns"
          :data="loadData"
          :alert="true"
          show-size-changer
          show-quick-jumper
          showPagination="auto"
        >
          <template slot="operator" slot-scope="text, record">
            <a class="base-btn" @click="handleOperate(record)">查看</a>
          </template>
        </s-table>
      </a-card>
    </div>
  </base-breadcrumb>
</template>

<script>
import { STable } from '@/components'
import SelectSubCompany from '@/components/Select/SelectSubCompany' // 分公司
import SelectProject from '@/components/Select/SelectProject' // 项目名称
import SelectSubcontractor from '@/components/Select/SelectSubcontractor' // 分包商
import { star } from '@/api/quality/quality' // api

export default {
  name: 'a' + Date.now(), components: {
    STable
  },
  props: {
    // type：0 安全行为之星；1 质量工匠之星
    type: [String, Number]
  },
  data() {
    return {
      searchOptions: [
        {
          name: '所属分公司',
          type: SelectSubCompany,
          valueKey: 'branchCompanyId'
        },
        // {
        //   name: '所属项目',
        //   type: SelectProject,
        //   valueKey: 'projectId'
        // },
        {
          name: '分包单位',
          valueKey: 'subcontractorId',
          showSearch: true,
          type: SelectSubcontractor
        },
        {
          name: '获奖人名字',
          value: 'employeeName',
          type: 'input'
        },
        // {
        //     name: '工种',
        //     value: 'typeWork',
        //     type: 'input',
        // },
        {
          name: '获奖时间',
          value: 'deliverTime',
          type: 'dateRange',
          attr: {
            rangeFormat: ['startDate', 'endeDate']
          }
        }
      ],
      childInitData: {},
      visible: {
        detail: false
      },
      formConfig: {},
      state: {
        isExpand: false
      },
      statistical: {},
      formInfo: this.$form.createForm(this, { name: 'searchForm' }),
      columns: [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          customRender() {
            return arguments[2] + 1
          }
        },
        {
          title: '姓名',
          dataIndex: 'employeeName',
          ellipsis: true
        },
        {
          title: '分包单位',
          dataIndex: 'subcontractorName',
          ellipsis: true
        },
        {
          title: '施工区域',
          dataIndex: 'respArea',
          ellipsis: true
        },
        {
          title: '表彰卡编号',
          dataIndex: 'cardNum',
          ellipsis: true
        },
        {
          title: '表彰卡面额',
          ellipsis: true,
          dataIndex: 'cardValue',
          customRender(e) {
            return e ? e + '元' : ''
          }
        },
        {
          ellipsis: true,
          title: '分公司',
          dataIndex: 'branchCompanyName'
        },
        {
          title: '所属项目',
          ellipsis: true,
          dataIndex: 'projectName'
        },
        {
          title: '发放人',
          ellipsis: true,
          dataIndex: 'issuer'
        },
        {
          title: '发放时间',
          width: 180,
          dataIndex: 'createTime'
        },
        {
          title: ' 操作',
          dataIndex: 'operator',
          width: 100,
          fixed: 'right',
          align: 'center',
          scopedSlots: { customRender: 'operator' }
        }
      ],
      queryParam: {},
      loadData: (parameter) => {
        const requestParameters = Object.assign({}, parameter, this.queryParam, { starType: this.type })
        //汇总统计
        star.summary(requestParameters).then((res) => {
          this.statistical = res.data
        })
        return star.list(requestParameters).then((res) => {
          if (res) {
            return res
          }
        })
      }
    }
  },
  methods: {
    search(val) {
      val && (this.queryParam = val)
      this.$refs.table.refresh(true)
    },
    /**
     * 查看详情
     */
    handleOperate(data) {
      this.$router.push({
        name: ['LookStar', 'qualityStarLook'][this.type], // type：0 安全行为之星；1 质量工匠之星
        query: {
          employeeId: data.employeeId,
          id: data.id,
          type: this.type
        }
      })
    }
  }
}
</script>